
<template>
  <Container :breadcrumb="breadcrumb">
    <a-table :loading="isLoading"
             :columns="columns"
             :dataSource="data"
             @change="handleChange"
             slot="container" />
  </Container>
</template>
<script>

/**
 * @description Service Define Component
 */

import Container from '@/components/common/Container'
import Api from '@api'

const breadcrumbConfig = [
  {
    path: '/dashboard',
    breadcrumbName: "i18n_common_home_page"
  },
  {
    path: '/service-define',
    breadcrumbName: "i18n_menu_operation_label"
  },
  {
    path: '',
    breadcrumbName: "i18n_menu_service_define_label"
  }
]
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',

  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters: [
      {
        text: 'London',
        value: 'London'
      },
      {
        text: 'New York',
        value: 'New York'
      }
    ]
  }
]

export default {
  data() {
    return {
      breadcrumb: breadcrumbConfig,
      isLoading: false,
      data: [],
      filteredInfo: null,
      sortedInfo: null,
    }
  },
  methods: {
    // Init
    init() {
      this.getOrderData()
    },
    getOrderData() {
      this.isLoading = true
      Api.get('orders', {}, true).then(
        res => {
          if (res) {
            this.isLoading = false
            this.data = res
          }
        },
        () => {
          this.isLoading = false
        }
      )
    },
    handleChange(pagination, filters, sorter) {
      this.filteredInfo = filters
      this.sortedInfo = sorter
    },
    clearFilters() {
      this.filteredInfo = null;
    },
    clearAll() {
      this.filteredInfo = null;
      this.sortedInfo = null;
    },
    setAgeSort() {
      this.sortedInfo = {
        order: 'descend',
        columnKey: 'age',
      }
    }
  },
  computed: {
    columns() {
      let { sortedInfo, filteredInfo } = this
      sortedInfo = sortedInfo || {}
      filteredInfo = filteredInfo || {}
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        filters: [
          { text: 'Joe', value: 'Joe' },
          { text: 'Jim', value: 'Jim' },
        ],
        filteredValue: filteredInfo.name || null,
        onFilter: (value, record) => record.name.includes(value),
        sorter: (a, b) => a.name.length - b.name.length,
        sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
      }, {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        sorter: (a, b) => a.age - b.age,
        sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
      }, {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        filters: [
          { text: 'London', value: 'London' },
          { text: 'New York', value: 'New York' },
        ],
        filteredValue: filteredInfo.address || null,
        onFilter: (value, record) => record.address.includes(value),
        sorter: (a, b) => a.address.length - b.address.length,
        sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
      }];
      return columns;
    }
  },
  components: {
    Container
  },
  created() {
    this.init()
  }
}
</script>
